<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件监听v-on</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!--事件的监听（进行交互）
            单击事件，双击事件，键盘敲击，鼠标滑动等
            v-on语法糖(简写) @
            可以定义为 function | inline statement | object
            参数event
            v-on绑定DOM事件监听
        -->
        <p>{{counter}}</p>
        <button v-on:click="counter++">+</button>
        <button v-on:click="counter--">-</button>
        <p>-------------------------------------</p>
        <!--
            一般来说我们用function
            如果用传参，不可以省略括号，if no参数，可以省略括号，但是默认有一个事件参数event
            (
                if no 参数，can 省略括号，后台必须有一个参数的话，会传event参数
                if 有参数，必须带括号，必须传参数
            )
        -->
        <button @click="increase(1,$event)">+</button>
        <button @click="counter--">-</button>
       

    </div>
    <br>
    <script>
        let app=new Vue({
            el:"#app",
            data:{
                msg:'hello world',
                counter:0
            },
            methods:{
                increase(a,b){
                    //event是一个默认参数，指代触发的事件
                    console.log(a);
                    console.log(b);
                    this.counter++
                },
                decrease(){
                    this.counter--

                }

            }

        })
    </script>
</body>
</html>